<template>
  <u-popup
    mode="center"
    v-model="showPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
    :maskCloseAble="false"
  >
    <view class="swiperBox">
      <swiper class="swiper" @change="change" :current="index">
        <swiper-item class="swiperItem" v-for="(item, key) of list" :key="key">
          <image
            :src="item.url"
            fade-show
            mode="heightFix"
            @click="showPopup = false"
          ></image>
        </swiper-item>
      </swiper>
      <view class="dots-num"> {{ index + 1 }}/{{ list.length }} </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },

    current: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      showPopup: false,
      index: 0,
    };
  },

  watch: {
    current(e) {
      this.index = e;
    },
  },

  methods: {
    change(e) {
      this.index = e.detail.current;
    },
  },
};
</script>

<style lang="scss" scoped>
.swiperBox {
  position: relative;
}

.swiper,
.swiperItem {
  width: 80vw;
  height: 70vh;
  background: #000;
}

image {
  height: 100%;
  display: block;
}

.dots-num {
  padding: 2rpx 5rpx;
  position: absolute;
  right: 5rpx;
  bottom: 5rpx;
  text-align: center;
  color: #fff;
}
</style>
